<template>
	<view class="flex-row" style="padding: 2%;text-align: center;" v-model="emptyState">
		<text v-bind:style="{ color: color,width: '25%'}">{{title}} :</text>
		<u-input v-model="value" class="uni-input" type="digit" :border="true" height="50" style="width: 35%;margin: 0 8%;" :placeholder="placeholderValue" @input="notifyFather" input-align="center"/>
		<text style="margin-left: 4%;">{{unit}}</text>
	</view>
</template>

<script>
	export default {
		name: "unitForm",
		props: {
			title: '',
			unit: '',
			color: '',
			type: '',
			value2: '',
			emptyState: false
		},
		data() {
			return {
				value: this.value2,
				placeholderValue: ''
			};
		},
		watch: {
			emptyState(n,o) {
				console.log(n)
				if(n) {
					this.value == "";
					this.placeholderValue = ' ';
				}
			}
		},
		methods: {
			notifyFather() {
				if (this.value == ""){
					this.value = "0"
				}
				let obj = {
					type: this.type,
					value: this.value
				}
				this.$emit('messageHandler', obj);
			},
			clear() {
				this.value = '';
			}
		}
	}
</script>

<style>

</style>
